<template>
	<div class="myOrderContent">
		<div class="fixedHead">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<div class="myCustHeader">
				<backBtn />
				<div class="inputBox">
					<input 
						class="uni-input" 
						type="text" 
						@confirm="getOrderList(true)" 
						v-model="orderCode" 
						:maxlength="50" 
						confirm-type="search"
						placeholder="搜索我的订单" 
					/>
				</div>
				<div 
					class="filterBtn flex flexAlignItems" 
					@click="doFilterDropdownBox"
				>
					<uni-icons type="search" size="20"></uni-icons>
					<div>筛选</div>
				</div>
				<div class="emptyBox"></div>
			</div>
			<my-filter-dropdown ref="myFilterDropdownRef" @statusConfirm="filterStatusConfirm"/>	

			<scroll-view class="scroll_view_w" :scroll-with-animation="true" scroll-x="true"
				:scroll-left="scrollViewLeft">
				<div class="barBox">
					<div class="item" v-for="(it,i) in tabMenus" :key="i" :class="{active:activeIndex===i}"
						@click="toggleTab(i)">
						{{it.name}}
					</div>
				</div>
			</scroll-view>

		</div>

		<div class="content">


			<swiper class="swiper" :style="{height: swiperHeight}" :current="activeIndex" :indicator-dots="false"
				:autoplay="false" @change="swiperChange">
				<swiper-item v-for="(it,index) in tabMenus.length" :key="index">

					<scroll-view :style="{height: swiperHeight}" refresher-enabled="true" :refresher-threshold="100"
						refresher-background="#f5f5f5" :refresher-triggered="triggered" :scroll-y="true"
						class="scroll-Y" @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">

						<div class="paddingBox" v-if="activeIndex==index">
							<div v-if="renderDataList[activeIndex].list.length>0">
								<order :dataList="renderDataList[activeIndex].list" :key="index" />

								<div class="myLoadMoreBox">
									<uni-load-more :status="renderDataList[activeIndex].status"></uni-load-more>
								</div>
							</div>
							<div class="noDataBox" v-else>
								<div class="noDataBorder">
									<image src="~@/static/images/nodata.png" class="nodataPic" />
								</div>
								<div class="noDataTips">
									哇，暂时还未产生任何订单~
								</div>
							</div>

						</div>


					</scroll-view>
				</swiper-item>
			</swiper>




		</div>

	</div>
</template>

<script src="./myOrder.ts" lang="ts"></script>

<style lang="stylus" scoped>
@import './myOrder.styl';
</style>
